<script>
import ImageControl from './ImageControl'
import TextControl from './TextControl'
import RollTextControl from './RollTextControl'
import VideoControl from './VideoControl'
import WeatherControl from './WeatherControl'
import CurrentDateControl from './CurrentDateControl'
import CountdownControl from './CountdownControl'
import WebControl from '@/view/v/Controls/WebControl.vue'

export default {
  render () {
    const { d } = this
    let sItem = {
      left: d.x + 'px',
      top: d.y + 'px',
      width: d.w + 'px',
      height: d.h + 'px',
      'z-index': d.zIndex
    }

    let vmCont
    switch (d.type) {
      case 1: case 2:
        vmCont = <ImageControl d={d}/>
        break
      case 3:
        vmCont = <TextControl d={d}/>
        break
      case 4:
        vmCont = <RollTextControl d={d}/>
        break
      case 5:
        vmCont = <VideoControl d={d}/>
        break
      case 6:
        vmCont = <CurrentDateControl d={d}/>
        break
      case 7:
        vmCont = <WeatherControl d={d}/>
        break
      case 8:
        vmCont = <CountdownControl d={d}/>
        break
      case 9:
        vmCont = <WebControl d={d}/>
        break
    }

    return <div class={{ 'control-item': true }} style={sItem}>{vmCont}</div>
  },
  props: {
    d: Object,
    index: Number
  }
}
</script>

<style scoped src="./index.css"></style>
